<template>
  <div>
    <div v-for="(item, index) in isparent ? nodesParent : nodes" :key="index">
      <div
        class="nodes-item"
        :class="{ 'nodes-item-actived': nodeselectid == item.id }"
        :style="{ paddingLeft: left + 'px' }"
        @click="nodeClick(item.id)"
      >
        <img
          class="item-folder-img"
          src="https://image.xuexiwangzhe.com/FjprRwGC9zJOmkalOivOstgZp8Rs"
        />
        <div class="item-name">{{ item.name }}</div>
        <template v-if="item.children && item.children.length > 0">
          <img
            class="item-arrow-img"
            src="https://image.xuexiwangzhe.com/FmMzZyvxu6OqZ4cD-1h339IWoRYI"
            @click.stop="nextClick(item.id, index)"
            v-if="childrenShow[index]"
          />
          <img
            src="https://image.xuexiwangzhe.com/FlPspKXYPYyP4rPiVoTfgtizauvI"
            class="item-arrow-img"
            v-else
            @click.stop="nextClick(item.id, index)"
          />
        </template>
      </div>
      <treeFolder
        v-if="item.children && item.children.length > 0"
        v-show="childrenShow[index]"
        :nodes="item.children"
        :nodeselectid="nodeselectid"
        v-bind="$attrs"
        v-on="$listeners"
        :isparent="false"
        :left="left + 9"
      ></treeFolder>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "treeFolder",
  props: {
    // 用于刷新数据，赋最新时间戳即可刷新
    refresh: {
      type: Number,
      default: new Date().getTime(),
    },
    isparent: {
      type: Boolean,
      default: true,
    },
    nodes: {
      type: Array,
      default: () => {
        return [];
      },
    },
    left: {
      type: Number,
      default: 35,
    },
    nodeselectid: {
      type: Number,
    },
    nodegetdataid: {
      type: Number,
    },
  },
  data() {
    return {
      childrenShow: [],
      nodesParent: [],
      page: 1,
      size: 100,
    };
  },
  inheritAttrs: false, // 取消props自应用html属性的功能
  watch: {
    refresh(newVal, oldVal) {
      if (newVal) {
        this.getData();
      }
    },
    nodegetdataid(newVal, oldVal) {
      if (newVal == -2) {
        this.page = 1;
        this.getFolderDataForUnGrouped();
      }
    },
    listReachBottom(newVal, oldVal) {
      if (!newVal) return;
      if (this.listLoad == "folder_ungrouped") {
        this.getFolderDataForUnGrouped();
      } else if (this.listLoad == "folder_node") {
        this.getFolderData(this.selectedFolderId);
      }
    },
  },
  created() {
    if (this.isparent) {
      this.getData();
    }
  },
  computed: mapState(["listReachBottom", "listLoad", "selectedFolderId"]),
  methods: {
    nodeClick(id) {
      this.$emit("select-folder-node", id);
      this.$store.commit("setSelectedFolderId", id);
      this.page = 1;
      if (id > 0) {
        this.getFolderData(id);
      } else {
        // -1 与我共享 -2 未分组
        if (id == -1) {
        } else if (id == -2) {
          this.getFolderDataForUnGrouped();
        }
      }
    },
    nextClick(id, index) {
      if (!this.childrenShow[index]) {
        this.$set(this.childrenShow, index, true);
      } else {
        this.$set(this.childrenShow, index, false);
      }
    },
    getFolderData(id) {
      this.$store.commit("setListLoad", "folder_node");
      this.$axios
        .get("/folder/getNextLevelAndProject", { params: { id } })
        .then((res) => {
          if (res.success) {
            if (this.page == 1) {
              this.$emit("click-folder-node-clear");
            }
            this.$emit("click-folder-node", res.data);
            this.page += 1;
          }
        });
    },
    getFolderDataForUnGrouped() {
      this.$store.commit("setListLoad", "folder_ungrouped");
      this.$axios
        .post("/project/ungrouped", { page: this.page, size: this.size })
        .then((res) => {
          if (res.success) {
            if (this.page == 1) {
              this.$emit("click-folder-node-clear");
            }
            this.$emit("click-folder-node-ungrouped", res.data);
            this.page += 1;
          }
        });
    },
    getData() {
      this.$axios.get("/folder/findFolderTree").then((res) => {
        if (res.success) {
          this.nodesParent = res.data;
          this.nodesParent.unshift(
            {
              id: -1,
              name: "与我共享",
            },
            {
              id: -2,
              name: "未分组",
            }
          );
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.nodes-item {
  display: flex;
  align-items: center;
  color: #333;
  padding-right: 10px;
  cursor: pointer;
  padding-top: 7px;
  padding-right: 7px;
  padding-bottom: 7px;
  width: 100%;
  flex-wrap: wrap;
}

.nodes-item-actived {
  background-color: #f2f4f8;
  font-weight: bold;
}

.item-folder-img {
  width: 20px;
  margin-right: 6px;
}

.item-arrow-img {
  width: 12px;
}

.item-name {
  margin-right: 6px;
}
</style>
